<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    /* 去掉图片底部缝隙 */
    img {
      vertical-align: bottom;
    }

    .w {
      width: 1200px;
      margin: 0 auto;
    }

    .banner {
      height: 400px;
      position: relative;
      /* 超出banner的内容隐藏 */
      overflow: hidden;
      margin-top: 50px;
    }

    .banner .arrow_left {
      width: 36px;
      height: 44px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -22px;
      z-index: 1;
      cursor: pointer;
    }

    .banner .arrow_right {
      width: 36px;
      height: 44px;
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -22px;

      z-index: 1;
      cursor: pointer;
    }

    /* 为什么要给ul设置600%的宽度,因为我们需要把所有的li浮动成一行,ul必须有足够的宽度才可以放得下 */
    .banner ul {
      /* width:600%; */
      /* 因为手动复制了添加了一个li到ul的子元素列表后面,这个时候ul里面就有7个li */
      /* width: 700%; */

      /* 如果想要让ul可以移动,需要给ul设置绝对定位 */
      position: absolute;
      left: 0;
      top: 0;
    }

    .banner ul li {
      float: left;
    }

    .banner .circle {
      position: absolute;
      bottom: 20px;
      left: 50%;
      width: 120px;
      margin-left: -60px;
    }

    .banner .circle li {
      width: 10px;
      height: 10px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      float: left;
      margin-right: 10px;
      /* 鼠标模拟手势 */
      cursor: pointer;
    }

    /* 为了后面可以点击li高亮 */
    /* .banner .circle li:first-child{
            width: 20px;
            border-radius: 10px;
        } */
    /* 我们单独定义一个类名 .current  */
    .banner .circle .current {
      width: 20px;
      border-radius: 10px;
    }

    .banner .circle li:last-child {
      margin-right: 0;
    }


    ol {
      width: 150px;
      height: 20px;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 15px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
    }

    ol li {
      width: 15px;
      height: 15px;
      background-color: ivory;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div class="banner w">
    <img src="images/prev.png" class="arrow_left" />
    <img src="images/next.png" class="arrow_right" />
    <ul>
      <li><a href="#"><img src="images/banner01.jpg"></a></li>
      <li><a href="#"><img src="images/banner02.jpg"></a></li>
      <li><a href="#"><img src="images/banner03.jpg"></a></li>
      <li><a href="#"><img src="images/banner04.jpg"></a></li>
      <li><a href="#"><img src="images/banner05.jpg"></a></li>
      <li><a href="#"><img src="images/banner06.jpg"></a></li>
    </ul>
    <ol class="circle">
    </ol>
  </div>
  <script>
    function autoplay() {
      move_time = setInterval(() => {
        index++
        move(ul, 'left', -index * wrap_width, movend)
      }, 2000)
    }
    function move(ele, type, value, cb) {

      let spe = parseInt(getComputedStyle(ele)[type])
      change_timer = setInterval(() => {
        value > spe ? spe += 10 : spe -= 10
        ele.style[type] = spe + 'px'
        if (value > spe) {
          if (spe >= value) {
            clearInterval(change_timer)
            cb()
          }
        } else {
          if (spe <= value) {
            clearInterval(change_timer)
            cb()
          }
        }
      }, 10)
    }
    function movend() {
      if (index >= ul.children.length - 1) {
        index = 1
        ul.style.left = -index * wrap_width + 'px'
      }
      if (index <= 0) {
        index = ol.children.length
        ul.style.left = -index * wrap_width + 'px'
      }
      for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
      }
      ol.children[index - 1].className = 'active'
      flag = false
    }
    let ul = document.querySelector('ul')
    let ol = document.querySelector('ol')

    let wrap = document.querySelector('.banner')
    let wrap_width = wrap.clientWidth
    let flag = false
    const frg = document.createDocumentFragment()
    for (let i = 0; i < ul.children.length; i++) {
      let focus = document.createElement('li')
      frg.appendChild(focus)
      if (i == 0) focus.className = 'active'
    }
    ol.appendChild(frg)
    let first = ul.firstElementChild.cloneNode(true)
    let last = ul.lastElementChild.cloneNode(true)
    ul.appendChild(first)
    ul.insertBefore(last, ul.firstElementChild)
    ul.style.width = ul.children.length * 100 + '%'
    ul.style.left = -wrap_width + 'px'
    let index = 1
    autoplay()
    wrap.onmouseover = () => clearInterval(move_time)
    wrap.onmouseout = () => autoplay()
    let left = document.querySelector('.arrow_left')
    let right = document.querySelector('.arrow_right')
    left.onclick = function () {
      if (flag) return
      index--
      move(ul, 'left', -index * wrap_width, movend)
      flag = true
    }
    right.onclick = function () {
      if (flag) return
      index++
      move(ul, 'left', -index * wrap_width, movend)
      flag = true
    }
    for (let i = 0; i < ol.children.length; i++) {
      ol.children[i].id = i
      ol.children[i].onclick = function () {
        if (flag) return
        index = this.id - 0 + 1
        move(ul, 'left', -index * wrap_width, movend)
        flag = true
      }
    }
    document.onvisibilitychange = () => document.visibilityState == 'hidden' ? clearInterval(move_time) : autoplay()
  </script>
</body>

</html>